<template>
  <view class="questionnaire-edit-page">
    <view class="top">
    <!-- 导航栏 -->
    <s-nav-bar
      title="编辑问卷"
      :background="'transparent'"
      :titleStyle="{ color: '#ffff', fontWeight: 'bold' }"
      statusBar
      immersive
      back
      :backStyle="{ color: '#fff' }"
    >
    </s-nav-bar>

    <!-- 顶部区域 -->
      <view class="info">
        <view class="info-right">
          <view class="name">编辑问卷</view>
        </view>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="main" scroll-y="true">
      <view class="mainBox">
        <!-- 问卷基本信息 -->
        <view class="questionnaire-info">
          <view class="info-card">
            <view class="info-header">
              <view class="title">{{ questionnaire.title }}</view>
              <view class="right">
                <view class="time">{{
                  formatDate(questionnaire.created_at)
                }}</view>
                <view class="status-tag" :class="questionnaire.status">
                  {{ statusText[questionnaire.status] || "未知" }}
                </view>
              </view>
            </view>

            <view class="info-content">
              {{ questionnaire.description }}
            </view>

            <!-- 底部操作栏 -->
            <view class="footer-actions">
              <view
                v-if="questionnaire.status === 'draft'"
                @click="publishQuestionnaire"
                class="btn"
              >
                发布问卷
              </view>

              <view
                v-if="questionnaire.status === 'published'"
                @click="closeQuestionnaire"
                class="btn"
              >
                关闭问卷
              </view>
              <view @click="deleteQuestionnaire" class="btn red">
                删除问卷
              </view>
              <view @click="openEditPopup" class="btn green"> 修改问卷 </view>
            </view>
          </view>
        </view>

        <!-- 问题列表 -->
        <view class="question-list">
          <view class="list-header">
            <view class="title">问题列表</view>
            <view class="actions">
              <s-button type="primary" size="small" @click="addQuestion">
                <view class="smallBtn">
                  <s-icon name="plus" size="14" />
                  <view>添加</view>
                </view>
              </s-button>
              <s-button type="default" size="small" @click="useTemplate">
                <view class="smallBtn">
                  <s-icon name="completed" size="14" />
                  <view>模板</view>
                </view>
              </s-button>
            </view>
          </view>

          <view class="question-cards">
            <view
              class="question-card"
              v-for="(question, index) in questions"
              :key="getQuestionKey(question)"
            >
              <view class="card-header" @click.stop="editQuestion(question)">
                <view class="question-index">Q{{ index + 1 }}</view>
                <view class="question-type"
                  >[{{ getQuestionTypeText(question.type) }}]</view
                >
                <view class="question-title">{{ question.content }}</view>
                <view class="question-required" v-if="question.required"
                  >*</view
                >
              </view>

              <!-- 新增：问题说明显示 -->
              <view class="question-tips" v-if="question.tips">
                {{ question.tips }}
              </view>

              <view class="card-content">
                <!-- 选择题选项预览 -->
                <view
                  class="options-preview"
                  v-if="
                    ['radio', 'check'].includes(question.type) &&
                    question.options
                  "
                  @click.stop="editQuestion(question)"
                >
                  <view
                    class="option-item"
                    v-for="(option, optIndex) in question.options"
                    :key="optIndex"
                  >
                    <view class="option-label"
                      >{{ String.fromCharCode(65 + optIndex) }}.</view
                    >
                    <view class="option-text">{{ option.label }}</view>
                  </view>
                </view>
              </view>

              <view class="card-footer">
                <s-button
                  class="actions"
                  size="small"
                  @click.stop="deleteQuestion(question.id || question.tempId)"
                >
                  <view class="smallBtn">
                    <s-icon
                      name="delete"
                      size="16"
                      style="transform: translateY(-2px)"
                      color="#f56c6c"
                    />
                    <view class="text">删除问题</view>
                  </view>
                </s-button>
              </view>
            </view>

            <view class="empty-tips" v-if="questions.length === 0">
              <s-icon name="box" size="40" color="#ccc" />
              <view class="empty-text">暂无问题，点击添加问题开始设计问卷</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 问卷基本信息编辑弹窗 -->
    <s-popup v-model="showEditPopup" position="bottom" round>
      <view class="form-container">
        <view class="form-title">编辑问卷信息</view>

        <view class="form-group">
          <view class="form-label"
            >问卷标题<text class="required">*</text></view
          >
          <uni-easyinput
            v-model="editForm.title"
            placeholder="请输入问卷标题"
            @input="validateTitle"
          />
          <view class="error-message" v-if="titleError">{{ titleError }}</view>
        </view>

        <view class="form-group">
          <view class="form-label">问卷描述</view>
          <textarea
            class="form-textarea"
            v-model="editForm.description"
            placeholder="请输入问卷描述(可选)"
          />
        </view>

        <view class="form-actions">
          <s-button type="default" @click="showEditPopup = false">
            取消
          </s-button>
          <s-button
            type="primary"
            @click="saveQuestionnaireInfo"
            :disabled="!!titleError"
          >
            保存
          </s-button>
        </view>
      </view>
    </s-popup>

    <!-- 问题编辑弹窗 -->
    <s-popup v-model="showQuestionPopup" position="bottom" round>
      <view class="question-form-container">
        <view class="form-title">
          {{ currentQuestion.id ? "编辑问题" : "添加问题" }}
        </view>

        <view class="form-group">
          <view class="form-label"
            >问题内容<text class="required">*</text></view
          >
          <uni-easyinput
            v-model="currentQuestion.content"
            placeholder="请输入问题内容"
            @input="validateQuestionContent"
          />
          <view class="error-message" v-if="contentError">{{
            contentError
          }}</view>
        </view>

        <!-- 新增：问题说明输入框 -->
        <view class="form-group">
          <view class="form-label">问题说明</view>
          <uni-easyinput
            v-model="currentQuestion.tips"
            placeholder="请输入问题说明(可选)"
          />
        </view>

        <view class="form-group">
          <view class="form-label"
            >问题类型<text class="required">*</text></view
          >
          <view class="picker-input" @click="showTypePicker = true">
            {{ getQuestionTypeText(currentQuestion.type) }}
            <s-icon name="arrow-down" size="16" color="#999" />
          </view>
          <s-picker
            v-model="currentQuestion.type"
            :columns="questionTypes"
            :visible.sync="showTypePicker"
            :title="'选择问题类型'"
            @confirm="handleQuestionTypeChange"
          />
        </view>

        <!-- 选择题选项 -->
        <view
          class="options-section"
          v-if="['radio', 'check'].includes(currentQuestion.type)"
        >
          <view class="section-title"> 选项设置 </view>

          <view
            class="option-item"
            v-for="(option, index) in currentQuestion.options"
            :key="index"
          >
            <view class="index">
              {{ option.value }}
            </view>
            <uni-easyinput
              v-model="option.label"
              :placeholder="`选项 ${index + 1}`"
            />
            <s-icon
              name="delete-o"
              size="20"
              color="#f56c6c"
              @click="removeOption(index)"
              v-if="currentQuestion.options.length > 1"
            />
          </view>

          <view class="options-footer">
            <s-button type="default" size="small" @click="addOption">
              <s-icon
                name="add"
                size="12"
                style="transform: translateY(-3rpx); margin-right: 6rpx"
              />
              添加选项
            </s-button>
            <view class="line">
              <view class="switch-container">
                <text class="switch-label">必填</text>
                <s-switch v-model="currentQuestion.required" size="16" />
              </view>
              <view class="switch-container">
                <text class="switch-label">日期</text>
                <s-switch v-model="currentQuestion.dateType" size="16" />
              </view>
              <view class="switch-container">
                <text class="switch-label">姓名</text>
                <s-switch v-model="currentQuestion.nameType" size="16" />
              </view>
            </view>
          </view>
        </view>

        <!-- 新增：文本类型问题的必填选项 -->
        <view
          class="line"
          v-if="['text', 'textarea'].includes(currentQuestion.type)"
        >
          <view class="switch-container">
            <text class="switch-label">必填</text>
            <s-switch v-model="currentQuestion.required" size="16" />
          </view>
          <view class="switch-container">
            <text class="switch-label">日期</text>
            <s-switch v-model="currentQuestion.dateType" size="16" />
          </view>
          <view class="switch-container">
            <text class="switch-label">姓名</text>
            <s-switch v-model="currentQuestion.nameType" size="16" />
          </view>
        </view>

        <view class="form-actions">
          <s-button type="default" @click="showQuestionPopup = false">
            取消
          </s-button>
          <s-button
            type="primary"
            @click="saveQuestion"
            :disabled="!!contentError"
          >
            保存
          </s-button>
        </view>
      </view>
    </s-popup>

    <!-- 模板选择弹窗 -->
    <s-popup v-model="showTemplateDialog" position="bottom" round>
      <view class="template-dialog">
        <view class="dialog-header">
          <text class="dialog-title">选择模板</text>
          <s-icon name="close" size="20" @click="showTemplateDialog = false" />
        </view>

        <scroll-view class="template-list" scroll-y>
          <view
            class="template-item"
            v-for="template in templates"
            :key="template.id"
            @click="selectTemplate(template)"
          >
            <view class="template-title">{{ template.title }}</view>
            <view class="template-desc">{{ template.description }}</view>
            <view class="template-questions"
              >共 {{ template.question_count }} 个问题</view
            >
          </view>
        </scroll-view>
      </view>
    </s-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionnaireId: null,
      showTypePicker: false,
      questionnaire: {
        id: "",
        title: "",
        description: "",
        status: "draft",
        created_at: "",
        updated_at: "",
        answer_count: 0,
      },
      questions: [],
      saving: false,
      showEditPopup: false,
      showQuestionPopup: false,
      showTemplateDialog: false,
      templates: [],
      currentQuestion: {
        id: "",
        tempId: "",
        content: "",
        tips: "",
        type: "text",
        required: false,
        options: [{ label: "", value: "A" }],
        sort_order: 0,
      },
      titleError: "",
      contentError: "",

      // 状态文本
      statusText: {
        draft: "草稿",
        published: "已发布",
        closed: "已关闭",
      },

      // 问题类型选项
      questionTypes: [
        { value: "text", label: "填空(单行)" },
        { value: "textarea", label: "填空(多行)" },
        { value: "radio", label: "单选题" },
        { value: "check", label: "多选题" },
      ],

      // 编辑表单数据
      editForm: {
        title: "",
        description: "",
      },
    };
  },
  onLoad(options) {
    this.questionnaireId = options.id;
    this.loadQuestionnaire();
    this.loadTemplates();
  },
  methods: {
    validateTitle() {
      if (!this.editForm.title) {
        this.titleError = "请输入问卷标题";
      } else {
        this.titleError = "";
      }
    },

    validateQuestionContent() {
      if (!this.currentQuestion.content) {
        this.contentError = "请输入问题内容";
      } else {
        this.contentError = "";
      }
    },
    
    // 获取问题的唯一key值，解决非H5平台不支持表达式作为:key的问题
    getQuestionKey(question) {
      return question.id || question.tempId;
    },

    // 获取默认问题结构
    getDefaultQuestion() {
      return {
        tempId: "temp_" + Date.now(),
        content: "",
        tips: "",
        type: "text",
        required: false,
        dateType: false,
        nameType: false,
        options: [{ label: "", value: "A" }],
        sort_order: this.questions.length + 1,
      };
    },

    // 加载问卷数据
    async loadQuestionnaire() {
      try {
        const res = await this.sjuAjax.get(
          `/questionnaire/detail?id=${this.questionnaireId}`
        );
        if (res && res.code === 200) {
          this.questionnaire = res.data.questionnaire || {
            id: "",
            title: "",
            description: "",
            status: "draft",
            created_at: "",
            updated_at: "",
            answer_count: 0,
          };

          // 处理问题数据
          this.questions = (res.data.questions || []).map((question) => {
            // 转换options格式
            let options = [];
            if (question.options && typeof question.options === "string") {
              try {
                const optionsObj = JSON.parse(question.options);
                // 选择题转换为 {value, label} 格式
                options = Object.entries(optionsObj).map(([value, label]) => ({
                  value,
                  label,
                }));
              } catch (e) {
                console.error("解析选项失败:", e);
                options = [];
              }
            }

            return {
              ...question,
              options,
              required: question.is_required === "1",
              dateType: question.is_date === "1",
              nameType: question.is_name === "1",
              tips: question.tips || "",
            };
          });

          this.editForm = {
            title: this.questionnaire.title,
            description: this.questionnaire.description,
            id: this.questionnaire.id,
          };
        }
      } catch (error) {
        uni.showToast({
          title: "加载问卷失败",
          icon: "none",
        });
      }
    },

    // 加载模板列表
    async loadTemplates() {
      try {
        const res = await this.sjuAjax.get("/questionnaire/templates");
        if (res && res.code === 200) {
          this.templates = res.data || [];
        }
      } catch (error) {
        console.error("加载模板失败:", error);
      }
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return "";
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    },

    // 获取问题类型文本
    getQuestionTypeText(type) {
      const typeMap = {
        text: "填空(单行)",
        textarea: "填空(多行)",
        radio: "单选题",
        check: "多选题",
      };
      return typeMap[type] || type;
    },

    // 显示问卷编辑弹窗
    openEditPopup() {
      this.showEditPopup = true;
    },

    // 保存问卷基本信息
    async saveQuestionnaireInfo() {
      this.validateTitle();
      if (this.titleError) return;

      try {
        const res = await this.sjuAjax.post(
          `/questionnaire/update`,
          this.editForm
        );

        if (res && res.code === 200) {
          this.questionnaire.title = this.editForm.title;
          this.questionnaire.description = this.editForm.description;
          uni.showToast({
            title: "保存成功",
            icon: "success",
          });
          this.showEditPopup = false;
        }
      } catch (error) {
        uni.showToast({
          title: error.message || "保存失败",
          icon: "none",
        });
      }
    },

    // 添加问题
    addQuestion() {
      this.currentQuestion = this.getDefaultQuestion();
      this.contentError = "";
      this.showQuestionPopup = true;
    },

    // 编辑问题
    editQuestion(question) {
      this.currentQuestion = JSON.parse(JSON.stringify(question));
      if (!this.currentQuestion.options) {
        this.currentQuestion.options = [{ label: "", value: "" }];
      }
      this.contentError = "";
      this.showQuestionPopup = true;
    },

    // 问题类型变化处理
    handleQuestionTypeChange() {
      if (["radio", "check"].includes(this.currentQuestion.type)) {
        if (
          !this.currentQuestion.options ||
          this.currentQuestion.options.length === 0
        ) {
          this.currentQuestion.options = [{ label: "", value: "" }];
        }
      } else {
        this.currentQuestion.options = [];
      }
    },

    // 添加选项
    addOption() {
      if (!this.currentQuestion.options) {
        this.currentQuestion.options = [];
      }

      const nextChar = String.fromCharCode(
        65 + this.currentQuestion.options.length
      );
      this.currentQuestion.options.push({
        label: "",
        value: nextChar,
      });
    },

    // 移除选项
    removeOption(index) {
      if (
        this.currentQuestion.options &&
        this.currentQuestion.options.length > 1
      ) {
        this.currentQuestion.options.splice(index, 1);
        this.rearrangeOptionValues();
      }
    },

    // 重新排列选项的value为A,B,C...
    rearrangeOptionValues() {
      this.currentQuestion.options.forEach((opt, index) => {
        opt.value = String.fromCharCode(65 + index);
      });
    },

    // 处理选项数据准备保存
    processOptionsBeforeSave() {
      if (!["radio", "check"].includes(this.currentQuestion.type)) {
        return {};
      }

      // 过滤掉label为空的选项
      const validOptions = this.currentQuestion.options.filter(
        (opt) => opt.label.trim() !== ""
      );

      // 转换为 {A: "选项1", B: "选项2"} 格式
      const optionsObj = {};
      validOptions.forEach((opt, index) => {
        optionsObj[String.fromCharCode(65 + index)] = opt.label;
      });

      return optionsObj;
    },

    // 保存问题
    async saveQuestion() {
      this.validateQuestionContent();
      if (this.contentError) return;

      try {
        // 准备问题数据
        const questionData = {
          content: this.currentQuestion.content,
          tips: this.currentQuestion.tips,
          type: this.currentQuestion.type,
          is_required: this.currentQuestion.required ? "1" : "0",
          is_date: this.currentQuestion.dateType ? "1" : "0",
          is_name: this.currentQuestion.nameType ? "1" : "0",
          sort_order: this.currentQuestion.sort_order,
          q_id: this.questionnaire.id,
          id: this.currentQuestion.id,
        };

        // 处理选项数据
        if (["radio", "check"].includes(this.currentQuestion.type)) {
          questionData.options = JSON.stringify(
            this.processOptionsBeforeSave()
          );
        }

        if (this.currentQuestion.id) {
          // 更新已有问题
          const res = await this.sjuAjax.post(`/question/update`, questionData);

          if (res && res.code === 200) {
            const index = this.questions.findIndex(
              (q) => q.id === this.currentQuestion.id
            );
            if (index !== -1) {
              this.questions.splice(index, 1, {
                ...this.currentQuestion,
                is_required: questionData.is_required,
                is_date: questionData.is_date,
                is_name: questionData.is_name,
                options: this.currentQuestion.options,
              });
            }
          }
        } else {
          // 添加新问题
          const res = await this.sjuAjax.post(`/question/add`, questionData);

          if (res && res.code === 200) {
            // 转换返回数据的options格式
            let options = [];
            if (res.data.options && typeof res.data.options === "string") {
              try {
                const optionsObj = JSON.parse(res.data.options);
                options = Object.entries(optionsObj).map(([value, label]) => ({
                  value,
                  label,
                }));
              } catch (e) {
                console.error("解析选项失败:", e);
                options = [];
              }
            }

            this.questions.push({
              ...res.data,
              options,
              required: res.data.is_required === "1",
              dateType: res.data.is_date === "1",
              nameType: res.data.is_name === "1",
              tips: res.data.tips || "",
            });
          }
        }

        this.showQuestionPopup = false;
        this.contentError = "";

        uni.showToast({
          title: "保存成功",
          icon: "success",
        });
        this.loadQuestionnaire();
      } catch (error) {
        uni.showToast({
          title: error.message || "保存失败",
          icon: "none",
        });
      }
    },

    // 删除问题
    deleteQuestion(questionId) {
      this.sjuAlert.showConfirm(
        "确定要删除这个问题吗？",
        () => {
          if (questionId.toString().startsWith("temp_")) {
            this.questions = this.questions.filter(
              (q) => q.tempId !== questionId
            );
          } else {
            this.sjuAjax
              .post(`/question/delete`, { id: questionId })
              .then((res) => {
                if (res && res.code === 200) {
                  this.loadQuestionnaire();
                  uni.showToast({
                    title: "删除成功",
                    icon: "success",
                  });
                }
              });
          }
        },
        () => {}
      );
    },

    // 发布问卷
    publishQuestionnaire() {
      this.sjuAlert.showConfirm(
        "确定要发布这份问卷吗？",
        () => {
          this.sjuAjax
            .post(`/questionnaire/publish`, { id: this.questionnaire.id })
            .then((res) => {
              if (res && res.code === 200) {
                this.questionnaire.status = "published";
                uni.showToast({
                  title: "问卷已发布",
                  icon: "success",
                });
              }
            });
        },
        () => {}
      );
    },

    // 关闭问卷
    closeQuestionnaire() {
      this.sjuAlert.showConfirm(
        "确定要关闭这份问卷吗？",
        () => {
          this.sjuAjax
            .post(`/questionnaire/close`, { id: this.questionnaire.id })
            .then((res) => {
              if (res && res.code === 200) {
                this.questionnaire.status = "closed";
                uni.showToast({
                  title: "问卷已关闭",
                  icon: "success",
                });
              }
            });
        },
        () => {}
      );
    },

    // 删除问卷
    deleteQuestionnaire() {
      this.sjuAlert.showConfirm(
        "确定要删除该问卷吗？\n删除后不可恢复！",
        () => {
          this.sjuAjax
            .post(`/questionnaire/delete`, { id: this.questionnaire.id })
            .then((res) => {
              if (res && res.code === 200) {
                uni.showToast({
                  title: "问卷已删除",
                  icon: "success",
                });
                setTimeout(() => {
                  uni.navigateTo({ url: "/pages/quest/index" });
                }, 500);
              }
            });
        },
        () => {}
      );
    },

    // 使用模板
    useTemplate() {
      this.showTemplateDialog = true;
    },

    // 选择模板
    selectTemplate(template) {
      this.sjuAlert.showConfirm(
        `确定要使用模板"${template.title}"吗？`,
        () => {
          this.sjuAjax
            .post(`/questionnaire/useTemplate`, {
              q_id: this.questionnaire.id,
              t_id: template.id,
            })
            .then((res) => {
              if (res && res.code === 200) {
                this.showTemplateDialog = false;
                uni.showToast({
                  title: "模板应用成功",
                  icon: "success",
                });
                this.loadQuestionnaire();
              }
            });
        },
        () => {}
      );
    },

    // 预览问卷
    handlePreview() {
      uni.navigateTo({
        url: `/pages/quest/preview?id=${this.questionnaire.id}`,
      });
    },

    // 保存问卷
    async handleSave() {
      this.saving = true;

      try {
        if (this.questionnaire.id) {
          await this.sjuAjax.post(
            `/questionnaire/update`,
            { id: this.questionnaire.id },
            {
              title: this.questionnaire.title,
              description: this.questionnaire.description,
            }
          );
        }

        uni.showToast({
          title: "保存成功",
          icon: "success",
        });
      } catch (error) {
        uni.showToast({
          title: error.message || "保存失败",
          icon: "none",
        });
      } finally {
        this.saving = false;
      }
    },
  },
};
</script>

<style lang="scss">
.questionnaire-edit-page {
  width: 100vw;
  height: 100vh;
  background-color: var(--v-bg);
  display: flex;
  flex-direction: column;
}


/* 顶部区域 */
.top {
  width: 100vw;
  height: 320rpx;
  background: var(--v-linear);
  flex-shrink: 0;
  border-radius: 0 0 30rpx 30rpx;
  display: flex;
  flex-direction: column;

  .info {
    display: flex;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    /* 右侧信息 */
    .info-right {
      display: flex;
      flex-direction: column;
      .name {
        margin-bottom: 10rpx;
      }
      .name {
        font-size: 44rpx;
        letter-spacing: 4rpx;
        color: #fff;
        text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.4);
        line-height: 1.2;
      }

      .company {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 主内容区域 */
.main {
  position: relative;
  top: -50rpx;
  display: flex;
  flex-direction: column;
  height: 0;
  flex-grow: 1;
  .mainBox {
    padding: 0 30rpx;
  }

  .questionnaire-info {
    margin-bottom: 20rpx;

    .info-card {
      background: rgba(255, 255, 255, 0.97);
      border-radius: 12rpx;
      box-shadow: var(--v-shadow);

      .info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .right {
          display: flex;
          gap: 10rpx;
          align-items: center;
        }
        .time {
          color: #999;
        }
        .status-tag {
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          font-size: 24rpx;

          &.draft {
            background-color: #d6f1c7;
            color: #67c23a;
          }

          &.published {
            background-color: #ecf5ff;
            color: #409eff;
          }

          &.closed {
            background-color: #fef0f0;
            color: #f56c6c;
          }
        }
      }

      .info-content {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #666;
        padding: 24rpx;
      }

      .info-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;

        > * {
          margin-left: 20rpx;
        }
      }
    }
  }

  .question-list {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12rpx;
    padding: 24rpx;
    box-shadow: var(--v-shadow);

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .actions {
        display: flex;

        > * {
          margin-left: 10rpx;
        }
      }
    }

    .question-cards {
      .question-card {
        background: #fff;
        border-radius: 8rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

        .card-header {
          display: flex;
          align-items: baseline;
          margin-bottom: 16rpx;
          padding-bottom: 30rpx;
          border-bottom: 1rpx solid #f5f5f5;
          gap: 14rpx;

          .question-index {
            font-weight: bold;
            color: var(--v-theme);
            flex-shrink: 0;
          }

          .question-type {
            font-size: 26rpx;
            color: #666;
            display: flex;
            align-items: center;
            flex-shrink: 0;
          }

          .question-required {
            font-size: 24rpx;
            color: #f56c6c;
          }
          .question-title {
            font-size: 30rpx;
            color: #333;
          }
        }

        /* 新增：问题说明样式 */
        .question-tips {
          font-size: 24rpx;
          color: #999;
          margin: 10rpx 0;
          padding: 0 20rpx;
        }

        .card-content {
          .options-preview {
            .option-item {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx;

              .option-label {
                font-size: 24rpx;
                color: #999;
                margin-right: 8rpx;
              }

              .option-text {
                font-size: 26rpx;
                color: #666;
              }
            }
          }
        }

        .card-footer {
          display: flex;
          justify-content: flex-end;
          margin-top: 16rpx;
          padding-top: 10rpx;
          border-top: 1rpx solid #f5f5f5;
        }
      }

      .empty-tips {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 0;
        color: #999;

        .empty-text {
          margin-top: 20rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}

/* 底部操作栏 */
.footer-actions {
  display: flex;
  background: #fff;
  border-top: 1rpx solid #eee;
  .btn {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-right: #eee 1px solid;
    color: var(--v-theme);
    &.red {
      color: var(--v-danger);
    }
    &.green {
      border: none;
      color: var(--v-green);
    }
  }
}

/* 表单弹窗样式 */
.form-container,
.question-form-container {
  padding: 30rpx;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;

  .form-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
    color: #333;
  }

  .form-group {
    margin-bottom: 30rpx;

    .form-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;

      .required {
        color: #f56c6c;
        margin-left: 4rpx;
      }
    }

    .form-input,
    .picker-input {
      width: 100%;
      padding: 20rpx;
      border: 1rpx solid #e5e5e5;
      border-radius: 8rpx;
      font-size: 28rpx;
      background-color: #fff;
      box-sizing: border-box;
    }

    .picker-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .error-message {
      color: #f56c6c;
      font-size: 24rpx;
      margin-top: 8rpx;
    }
  }

  .options-section {
    margin-top: 20rpx;

    .section-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }

    .option-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      gap: 20rpx;
      .index {
        font-weight: bold;
        color: var(--v-theme);
      }
      .option-input {
        flex: 1;
        padding: 20rpx;
        border: 1rpx solid #e5e5e5;
        border-radius: 8rpx;
        font-size: 28rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
      }
    }

    .options-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .switch-container {
        display: flex;
        align-items: center;

        .switch-label {
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f5f5f5;

    button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}

/* 问题表单样式 */
.question-form-container {
  .options-section {
    margin-top: 20rpx;

    .section-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }

    .option-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .option-input {
        flex: 1;
        padding: 20rpx;
        border: 1rpx solid #e5e5e5;
        border-radius: 8rpx;
        font-size: 28rpx;
        margin-right: 10rpx;
      }
    }
  }

  .switch-container {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    gap: 20rpx;

    .switch-label {
      font-size: 28rpx;
      color: #666;
    }
  }
}

/* 模板弹窗样式 */
.template-dialog {
  padding: 30rpx;
  background: #fff;
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .dialog-title {
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .template-list {
    max-height: 60vh;

    .template-item {
      padding: 20rpx;
      margin-bottom: 20rpx;
      background: #f9f9f9;
      border-radius: 8rpx;

      .template-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 5rpx;
      }

      .template-desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 5rpx;
      }

      .template-questions {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}
.smallBtn {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.form-textarea {
  border: #e5e5e5 2rpx solid;
  border-radius: 8rpx;
  box-sizing: border-box;
  padding: 20rpx;
  color: #333;
  font-size: 28rpx;
  width: 100%;
  transition: border-color 0.3s;
}
.line {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  align-items: center;
}
</style>